<template>
    <div class="house-contract-management">
        <!-- 操作栏：添加按钮 + 搜索 -->
        <div class="operation-bar">
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加合同</el-button>
            <div class="search-group" style="margin-left: auto;">
                <el-input v-model="searchQuery" placeholder="请输入姓名/房号/手机号搜索" style="width: 240px;" />
                <el-button type="primary" icon="el-icon-search" @click="handleSearch"></el-button>
                <el-button type="primary" icon="el-icon-filter"></el-button>
            </div>
        </div>

        <!-- 房屋合同表格 -->
        <el-table :data="filteredTableData" border style="width: 100%; margin-bottom: 20px;">
            <el-table-column prop="community" label="小区" />
            <el-table-column prop="houseNo" label="房号" />
            <el-table-column prop="area" label="面积" width="100" />
            <el-table-column prop="direction" label="朝向" width="100" />
            <el-table-column prop="lessee" label="租赁方" />
            <el-table-column prop="contact" label="联系人" width="100" />
            <el-table-column prop="phone" label="联系电话" />
            <el-table-column prop="rent" label="租金" width="100" />
            <el-table-column prop="startTime" label="起租时间" />
            <el-table-column prop="rentMethod" label="租金方式" />
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleDetail(scope.row)">详情</el-button>
                    <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" plain @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrap">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="prev, pager, next, ->, jumper, ->, sizes, total" :total="tableData.length" />
        </div>
    </div>
</template>

<script>
import request from '@/utils/request';

export default {
    name: 'HouseContractList',
    data() {
        return {
            searchQuery: '',
            tableData: [],
            filteredTableData: [],
            currentPage: 1,
            pageSize: 10
        }
    },
    created() {
        this.fetchContracts();
    },
    methods: {
        fetchContracts() {
            request.get('/houseContract/list')
                .then(res => {
                    this.tableData = res.data || [];
                    this.filterTableData();
                })
                .catch(err => {
                    this.$message.error('获取合同列表失败');
                    console.error(err);
                });
        },
        handleAdd() {
            this.$router.push({ path: '/house-contract-add' });
        },
        handleDetail(row) {
            this.$router.push({ path: `/house-contract-detail/${row.id}` });
        },
        handleEdit(row) {
            // 可以在这里添加编辑逻辑，或者导航到编辑页面
            this.$router.push({ path: `/house-contract-edit/${row.id}` });
        },
        handleDelete(row) {
            this.$confirm('确定要删除该合同吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.delete(`/houseContract/delete/${row.id}`)
                    .then(res => {
                        if (res.code === 200) {
                            this.$message.success('合同删除成功');
                            this.fetchContracts();
                        } else {
                            this.$message.error(res.message || '删除失败');
                        }
                    })
                    .catch(err => {
                        this.$message.error('删除过程中发生错误');
                        console.error(err);
                    });
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
        handleSearch() {
            this.filterTableData();
        },
        filterTableData() {
            if (this.searchQuery) {
                this.filteredTableData = this.tableData.filter(item => {
                    return item.community.includes(this.searchQuery) ||
                        item.houseNo.includes(this.searchQuery) ||
                        item.contact.includes(this.searchQuery) ||
                        item.phone.includes(this.searchQuery);
                });
            } else {
                this.filteredTableData = this.tableData;
            }
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.filterTableData();
        },
        handleCurrentChange(newPage) {
            this.currentPage = newPage;
            this.filterTableData();
        }
    }
}
</script>

<style scoped>
.operation-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

h3 {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
}

.el-form-item {
    margin-bottom: 15px;
}

.pagination-wrap {
    text-align: right;
    margin-top: 20px;
}
</style>
